<template>
	<div class="container">
		<Header  title="代报备"></Header>
		<mt-field label="客户姓名：" placeholder="请输入姓名(必填)" :attr="{ maxlength: 10 }" v-model="name"></mt-field>
		<div class="mint-cell mint-field">
			<div class="mint-cell-wrapper">
				<div class="mint-cell-title">
					<span class="mint-cell-text">客户类别：</span>
				</div>
				<div class="mint-cell-value">
					<label class="sexBtn" :class="{'active':checkedSex ==1}" @click="checkedSex = 1" v-model="gender">先生
						<input type="radio" name="sex" v-model="gender" value="0" />
					</label>
					<label class="sexBtn" :class="{'active':checkedSex ==2}" @click="checkedSex = 2">女士
						<input type="radio" name="sex" v-model="gender" value="1" />
					</label>
				</div>
			</div>	
		</div>
		<mt-field label="客户电话：" placeholder="请输入电话(必填)" type="tel" :attr="{ maxlength: 11 }"  v-if="!isShow" v-model="mobile"></mt-field>
		<div class="mint-cell mint-field"  v-if="isShow">
			<div class="mint-cell-wrapper">
				<div class="mint-cell-title">
					<span class="mint-cell-text">客户电话：</span>
				</div>
				<div class="mint-cell-value">
					<input type="tel" maxlength="7" class="digital-input-box" v-model="helfTel">
					<div class="digital-input">
						<div class="digital-input-item">{{ userTel.numA }}</div>
						<div class="digital-input-item">{{ userTel.numB }}</div>
						<div class="digital-input-item">{{ userTel.numC }}</div>
						<div class="digital-input-item"><i class="fa fa-asterisk"></i></div>
						<div class="digital-input-item"><i class="fa fa-asterisk"></i></div>
						<div class="digital-input-item"><i class="fa fa-asterisk"></i></div>
						<div class="digital-input-item"><i class="fa fa-asterisk"></i></div>
						<div class="digital-input-item">{{ userTel.numD }}</div>
						<div class="digital-input-item">{{ userTel.numE }}</div>
						<div class="digital-input-item">{{ userTel.numF }}</div>
						<div class="digital-input-item">{{ userTel.numG }}</div>
					</div>
				</div>
			</div> 	
		</div>
		<div class="mint-cell mint-field">
			<div class="mint-cell-wrapper">
				<div class="mint-cell-title">
					<span class="mint-cell-text"></span>
				</div>
				<div class="mint-cell-value">
					<div class="telEye" @click="isShow = !isShow">
						<span class="toggleTel" v-if="!isShow">
							<i class="fa fa-eye-slash"></i>隐号报备
						</span>
						<span class="toggleTel" v-if="isShow">
							<i class="fa fa-eye"></i>全号报备
						</span>
					</div>
				</div>
			</div>	
		</div>
		<div class="mint-cell mint-field">
			<div class="mint-cell-wrapper">
				<div class="mint-cell-title">
					<span class="mint-cell-text">意向楼盘：</span>
				</div>
				<div class="mint-cell-value">
					<select class="selectPremises" v-model="premisesId">
						<option value="0" selected="selected">请选择楼盘</option>
						<option v-for="(item,index) in premisesList" :value="item.premisesId">{{item.premisesName}}</option>
					</select>
				</div>
			</div>
		</div>
		<div class="mint-cell mint-field">
			<div class="mint-cell-wrapper">
				<div class="mint-cell-title">
					<span class="mint-cell-text">公司：</span>
				</div>
				<div class="mint-cell-value">
					<input type="text" name="jjr" placeholder="请选择公司" @click="showCompanyList()" v-model="companyName" readonly>
				</div>
			</div> 	
		</div>
		<div class="mint-cell mint-field">
			<div class="mint-cell-wrapper">
				<div class="mint-cell-title">
					<span class="mint-cell-text">经纪人：</span>
				</div>
				<div class="mint-cell-value">
					<input style="width: 80%;"
						type="text" name="jjr" placeholder="请选择经纪人"
						onfocus="this.blur();" @click="showPartnerList" v-model="accountName" readonly
					>
					<button class="add-agent" v-show="showAddAgentBtn" @click="showAddAgentModel">新增</button>
				</div>
			</div>
		</div>
		<div class="mint-cell mint-field">
			<div class="mint-cell-wrapper">
				<div class="mint-cell-title">
					<span class="mint-cell-text">期望带看时间</span>
				</div>
				<div class="mint-cell-value">
					<input type="text" name="date" @click="openPicker" placeholder="请选择期望带看时间" v-model="visitProtectDate" readonly>
					<mt-datetime-picker ref="picker" type="datetime" v-model="pickerValue" @confirm="handleConfirm"></mt-datetime-picker>
				</div>
			</div>
		</div>
		<div class="mint-cell mint-field is-textarea">
			<div class="mint-cell-wrapper">
				<div class="mint-cell-title">
					<span class="mint-cell-text">备注：</span>
				</div>
				<div class="mint-cell-value">
					<textarea  rows="4" class="mint-field-core" v-model="remark"></textarea>
				</div>
			</div>
		</div>

		<div class="report-button">
			<mt-button size="large" type="danger" v-show="reportBtnShow" @click="reportUserInfo">报备</mt-button>
		</div>

		<mt-popup v-model="popupCompany" position="bottom" class="mint-popup mint-datetime mint-popup-bottom">
			<div class="" >
				<div class="picker-toolbar">
					<!--<div class="mint-datetime-action left" style="width:30%"><div class="arrow-top left"></div><div class="arrow-down left"></div></div>-->
					<div class="mint-datetime-action mintui-search left" style="font-family: mintui!important;width:80%" @click="showSearch"></div>
				    <div class="mint-datetime-action left" style="width:20%" @click="completeCompany">完成</div>
				</div>
				<!--<mt-loadmore >-->
					<!--<ul style="height: 200px;overflow: scroll;">-->
						<!--<li class="company-li" style="text-align:center" v-for="item in companyList" @click="selectCompany(item)">{{ item.agentCompanyName }}</li>-->
					<!--</ul>-->
				<!--</mt-loadmore>-->
				<mt-picker  :slots="addressSlots"  value-key='agentCompanyName' :item-height="48" @change="onValuesChange"></mt-picker>
			</div>
		</mt-popup>

		<mt-popup v-model="popupAgency" position="bottom" class="mint-popup mint-datetime mint-popup-bottom">
			<div class="" >
				<div class="picker-toolbar">
					<div class="mint-datetime-action mintui-search left" style="font-family: mintui!important;width:80%" @click="showAgencySearch"></div>
					<div class="mint-datetime-action left" style="width:20%" @click="completeAgency">完成</div>
				</div>
			</div>
			<mt-picker :slots="agencySlots"  value-key="accountName" :item-height="48" @change="onAgencyChange"></mt-picker>
		</mt-popup>

		<!-- 添加外部经纪人 -->
	    <div class="popup-page" v-if="addAgentModelShow">
	    	<div class="popup-mask" @click="closeAddAgentModel"></div>
	    	<div class="popup-container">
	    		<div class="popup-header" style="text-align: center; color: gray;">新增经纪人</div>
	    		<div class="popup-body">
	    			<ul class="invalid-list">
	    				<li style="padding-left: 0px; margin-bottom: 10px;">
							<label style="color: red">*</label>经纪人姓名&nbsp;
							<input type="text" name="agentName" v-model="addAgentModel.agentName" placeholder="请输入经纪人姓名" class="add-agent-input"/>
						</li>
						<li style="padding-left: 0px; margin-bottom: 10px;">
							<label style="color: red">*</label>经纪人手机&nbsp;
							<input type="text" name="agentPhone" v-model="addAgentModel.agentPhone" placeholder="请输入经纪人手机" class="add-agent-input"/>
						</li>
						<li style="padding-left: 0px; margin-bottom: 10px;">
							<label style="width: 100%; font-size: 12px; margin-left: 16%; color: gray;">手机号将作为经纪人登录系统的账号</label>
						</li>
					</ul>
	    		</div>
	    		<div class="popup-footer">
	    			<a href="javascript:;" class="btn" @click="closeAddAgentModel">取消</a>
	    			<a href="javascript:;" class="btn checkBtn" @click="addAgent">确定</a>
	    		</div>
	    	</div>
	    </div>
	</div>

</template>

<script>
	import { Toast, MessageBox,Popup ,Search,DatetimePicker,CellSwipe,Picker } from 'mint-ui'
	export default {
		data () {
		    return {
		    	name:'',//姓名
		    	gender:'0',//性别
		    	mobile:'',//电话
		    	remark:'',//备注
		      	checkedSex: 1,
		      	isShow:false,
		      	helfTel:'',
		      	companyList:[],
		      	premisesList:[],
		      	agentList:[],
		      	companyId:0,
		      	premisesId:0,
		      	agentId:0,
		      	hidePhont:'',
		      	reportBtnShow: true,
		      	visitProtectDate:'',
		      	isSubmit: 0,
		      	pickerValue: new Date(),
                accountPopupVisible:false,
				companyPopupVisible:false,
                accountName:'',
				companyName:'',
				popupCompany:false,
				popupAgency:false,
				addressSlots:[],
				agencySlots:[],
				tempCompanyId:0,
				tempCompanyName:'',
				tempAgencyId:0,
				tempAgencyName:'',
				showAddAgentBtn: false,
				addAgentModelShow: false,
				addAgentModel: {
					agentCompany: '',
					agentName: '',
					agentPhone: ''
				},
		    }
		},
		computed: {
			userTel () {
		      let numA,numB,numC,numD,numE,numF,numG
		      if ((this.helfTel).length > 0) {
		        numA = this.helfTel.substring(0,1);
		        numB = this.helfTel.substring(1,2);
		        numC = this.helfTel.substring(2,3);
		        numD = this.helfTel.substring(3,4);
		        numE = this.helfTel.substring(4,5);
		        numF = this.helfTel.substring(5,6);
		        numG = this.helfTel.substring(6,7);
		      }
		      return {
		        numA,numB,numC,numD,numE,numF,numG
		      }
		    }
		},
		watch: {
		  topPopup:function(val) {
			   if (val) {
			  setTimeout(() => {
				this.topPopup = false;
			  }, 2000);
        	}
      	  },
      	  premisesId:function(val){
      	  	this.premisesId = val;
      	  	if(!val || val == 0){
      	  		return;
      	  	}
      		this.initCompanyList(val);
      		this.companyName = '';
      		this.accountName = '';
      		this.companyId = null;
      		this.agentId = null;
      	  },
      	  companyId: function(newValue, oldValue) {
      	  		if(this.companyId != null){
           			this.initAgencyList(newValue);
           		}
           }

		},
		mounted() {
			this.initPremisesList();
			this.initData();
			//this.initCompanyList(null);
		},
		activated(){//回退页面
			//this.initCompanyList(null);
			this.initPremisesList();
			this.popupCompany = false;
			if(this.$route.query.type == '1'){
				this.companyName = this.$route.query.companyName;
				this.companyId = this.$route.query.companyId;
				this.agentId = this.$route.query.agentId;
				this.accountName = this.$route.query.accountName;
			}else if(this.$route.query.type == '2'){
				this.agentId = this.$route.query.agentId;
				this.accountName = this.$route.query.accountName;
			}
		},
		beforeRouteEnter(to,from,next){//如果是从首页过来的则初始化数据
			next(vm=>{
				if(from.path =='/index'){
				vm.initData();
				}
			});
		},
		methods :{
			initCompanyList(premisesId) {
				let _self = this;
				let url = this.utilHelper.apiUrl+'/api/getAgentOrgByCompanyList';
				var body = {};
				body.params = {
						premisesId:_self.premisesId,
						pageNo:1,
						pageSize:50
					}
				this.$http.post(url,body).then((response)=>{
					let body = response.body;
					if(body.result==1){
						_self.companyList = [{"agentCompanyId":"","agentCompanyName":"请选择公司"}];
						for(var i=0;i<body.resData.agentCompanyList.length;i++){
							_self.companyList.push(body.resData.agentCompanyList[i]);
						}
						this.addressSlots = [];
						this.addressSlots.push({values:_self.companyList});
					}else{
						Toast({
						  	message: '数据获取失败',
						  	position: 'middle',
						  	duration: 2000
						});
					}
				});
			},
			initAgencyList(companyId){
				this.pageNo = 1;
	 			let url = this.utilHelper.apiUrl+'/api/getPartnerByAgentOrg';
                var body = {};
                body.params = {
                    premisesId: this.premisesId,
                   	companyId:this.companyId,
                    pageNo:1,
                    pageSize:10
                }
                this.$http.post(url,body).then((response)=>{
                    let body = response.body;
                    if(body.result==1){
                    	this.agentList= [{"id":"","accountName":"请选择经纪人"}];
                    	for(var i=0;i<body.resData.agentList.length;i++){
							this.agentList.push(body.resData.agentList[i]);
						}
                        this.agencySlots = [];
                        this.agencySlots.push({values:this.agentList});
                    }else{
                        Toast({
                            message: '数据获取失败',
                            position: 'middle',
                            duration: 2000
                        });
                    }
                });
			},
			initPremisesList(){
				var body = {};
				body.params = {};
				var url = this.utilHelper.apiUrl + '/api/getCaseMemberList';
				this.$http.post(url,body).then((response)=>{
				var body = response.body;
				if(1 == body.result){
					this.premisesList = body.resData.caseMemberList;
				}else{
					Toast({
						  	message: '数据获取失败',
						  	position: 'middle',
						  	duration: 2000
						});
				}
				});
			},
			reportUserInfo() {
				var _self = this;
				_self.reportBtnShow = false;
				if(this.verificationInfo()){
					let url = this.utilHelper.apiUrl + "/api/agencyReport";
					if(this.isShow){_self.mobile = _self.hidePhont;}
					var body = {};
					body.params= {
						name:_self.name,
						gender:_self.gender,
						mobile:_self.mobile,
						remark:_self.remark,
						staffId:_self.agentId,
						premisesId:_self.premisesId,
						visitProtectDate:_self.visitProtectDate + ":00",
						isSubmit:_self.isSubmit
					}
					this.$http.post(url,body).then((response) => {
						_self.reportBtnShow = true;
						let body = response.body;
			   			if(body.result == 1){
			   				let instance = Toast('提交成功！');
							setTimeout(() => {
							_self.name='';
			   				_self.gender = 0;
			   				_self.mobile='';
			   				_self.remark = '';
			   				_self.premisesId = 0;
			   				_self.companyId = 0;
			   				_self.agentId =0;
			   				_self.visitProtectDate ='';
							_self.addAgentModel.agentCompany = '';
							_self.addAgentModel.agentName = '';
							_self.addAgentModel.agentPhone = '';
							_self.showAddAgentBtn = false;
							instance.close();
							  	_self.$router.push({
									path: '/assistantIndex'
								})
							}, 2000);
			   			}else{
			   				if(body.errorCode == "9527"){
			   					var errorMsg = "本楼盘的到访延长时间为" + body.errorMsg + "分钟，从报备之时起" + body.errorMsg + "分钟内未到访,"
			   								 + "需要重新报备。您的期望带看时间已超过了到访延长时间，是否继续报备";
			   					MessageBox.confirm(errorMsg).then(
			   						action => {
			   							//确定
			   						   _self.isSubmit = 1;
									   _self.reportUserInfo();
			   						},
			   						action => {
			   							//取消
			   							_self.reportBtnShow = true;
			   						}
			   					);
			   					return false;
			   				}
			   				Toast({
							  	message: '报备失败:'+ body.resData.resultMsg,
							  	position: 'middle',
							  	duration: 2000
							});
							_self.reportBtnShow = true;
			   			}
					});
				}else{
					_self.reportBtnShow = true;
				}
			},
			verificationInfo() {
				let _self = this;
				if(!this.name){
					Toast({
					  message: '请输入客户姓名',
					  position: 'middle',
					  duration: 3000
					});
					return false;
				}
				if(this.isShow){
					let numA = _self.helfTel.substring(0,3);
					let numB = _self.helfTel.substring(3);

					if(!(/^1(3|4|5|6|7|8|9)\d{1}$/.test(numA)) || !(/^\d{4}$/.test(numB))){
						Toast({
						  message: '客户电话有误或为空',
						  position: 'middle',
						  duration: 3000
						});
						return false;
					}
					this.hidePhont = numA+"****"+numB;
				}else{
					if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobile))){
						Toast({
						  message: '客户电话有误或为空',
						  position: 'middle',
						  duration: 3000
						});
						return false;
					}
				}
				if(!this.premiseId && this.premiseId == 0 ||  this.premisesId === undefined){
						Toast({
						  message: '请选择意向楼盘',
						  position: 'middle',
						  duration: 3000
						});
						return false;
				}
				if(!this.companyName){
						Toast({
						  message: '请选择经纪公司',
						  position: 'middle',
						  duration: 3000
						});
						return false;
				}
				if(!this.agentId ||this.agentId == 0){
						Toast({
						  message: '请选择经纪人',
						  position: 'middle',
						  duration: 3000
						});
						return false;
				}
				var visitProtectDate = _self.visitProtectDate;
				if(visitProtectDate == ""){
					Toast({
					  	message: '请选择期望带看时间',
					  	position: 'middle',
					  	duration: 2000
					});
					return false;
				}

				return true;
			},
			openPicker() {
		        this.$refs.picker.open();
		    },
		    handleConfirm(e) {
		    	var date = new Date(e);
		    	var visitProtectDate = date.getFullYear() +
		    		"-"+ this.fomrtDate(date.getMonth() + 1) +
		    		"-"+ this.fomrtDate(date.getDate())+
		    		" " + this.fomrtDate(date.getHours()) +
		    		":" + this.fomrtDate(date.getMinutes());
		    	this.visitProtectDate = visitProtectDate
		    },
		    fomrtDate(n) {
            	return n >= 10 ? n : "0" + n;
            },
			showCompanyList:function(){
				//this.$router.push({path:'/reportSearch',query:{type:1}});
				if(!this.premisesId || this.premisesId == 0){
					Toast('请选择意向楼盘');
					return;
				}
				this.popupCompany = true;
				//替换方法

			},
			showSearch :function(){
				this.$router.push({path:'/reportSearch',query:{type:1,premiseId:this.premisesId}});
			},
			showAgencySearch:function(){
				this.popupAgency = false;
				this.$router.push({path:'/reportSearch',query:{type:2,companyId:this.companyId,companyName:this.companyName}});
			},
			showPartnerList:function(){
				if(this.companyId == null || this.companyId == ''){
					Toast('请选择公司');
					return;
				}else{
					this.popupAgency = true;
					//this.$router.push({path:'/reportSearch',query:{type:2,companyId:this.companyId,companyName:this.companyName}});
				}
			},
			selectCompany : function(item){
				this.companyName = item.agentCompanyName;
				this.companyId = item.agentCompany;
				this.popupCompany = false;
			},
			substring:function(value,size){
			 if(value.length > size){
				return value.substring(0,size)+'...';
			}else{
				return value;
			}

			},
			onValuesChange(picker,values){
				var _self = this;
				if(values.length > 0){
					_self.showAddAgentBtn = false;
					_self.tempCompanyId = values[0].agentCompany;
					if(_self.tempCompanyId){
						_self.showAddAgentBtn = true;
					}
					_self.tempCompanyName = values[0].agentCompanyName;
				}else{
					_self.showAddAgentBtn = false;
				}
			},
			onAgencyChange(picker,values){
				if (values.length > 0) {
					this.tempAgencyId = values[0].id;
					this.tempAgencyName = values[0].accountName;
				}
			},
			completeCompany(){
				if(!this.tempCompanyId){
					this.companyId	= null;
					this.companyName = '';
				}else{
					if(this.companyId != this.tempCompanyId){
						this.companyId = this.tempCompanyId;
				 		this.companyName = this.tempCompanyName;
				 		//经纪人清空,本地参数清空，url清空
				 		this.agentId = null;
				 		this.accountName = '';
				 		this.$route.query.accountName = '' ;
					}
				}
				this.popupCompany = false;
			},
			completeAgency(){//经纪人选择
				if(!this.tempAgencyId){
					this.agentId = null;
					this.accountName = '';
				}else{
					if(this.agentId != this.tempAgencyId){
						this.agentId = this.tempAgencyId;
						this.accountName = this.tempAgencyName;
					}
				}
				this.popupAgency = false;
			},
			showAddAgentModel(){
				var _self = this;
				_self.addAgentModelShow = true;
			},
			closeAddAgentModel(){
				var _self = this;
				_self.addAgentModelShow = false;
			},
			addAgent(){
				var _self = this;
				_self.addAgentModel.agentCompany = _self.companyId;
				if(_self.verificationAddAgentInfo()){
					var body = {};
					body.params = _self.addAgentModel;
					var url = this.utilHelper.apiUrl + '/api/addPartnerQuick';
					this.$http.post(url,body).then((response)=>{
						var body = response.body;
						var resData = body.resData;
						if(1 == resData.result){
							_self.closeAddAgentModel();
							_self.tempAgencyId = resData.agentId;
							_self.tempAgencyName = resData.agentName;
							_self.agentId = _self.tempAgencyId;
							_self.accountName = _self.tempAgencyName;
						}else{
							Toast({
								message: body.resultMsg,
								position: 'middle',
								duration: 2000
							});
						}
					});
				}
			},
			verificationAddAgentInfo() {
				let _self = this;
				if(!_self.companyId){
					Toast({
					  message: '请选择经纪公司',
					  position: 'middle',
					  duration: 3000
					});
					return false;
				}
				if(!_self.addAgentModel.agentName){
					Toast({
					  message: '请输入经纪人姓名',
					  position: 'middle',
					  duration: 3000
					});
					return false;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(_self.addAgentModel.agentPhone))){
					Toast({
						message: '经纪人电话有误或为空',
						position: 'middle',
						duration: 3000
					});
					return false;
				}
				return true;
			},
			initData:function(){
			    this.name='';//姓名
		    	this.gender='0';//性别
		    	this.mobile='';//电话
		    	this.remark='';//备注
		      	this.checkedSex= 1;
		      	this.isShow=false;
		      	this.helfTel='';
		      	this.companyList=[];
		      	this.agentList=[];
		      	this.companyId=0;
		      	this.agentId=0;
		      	this.premisesId=0;
		      	this.hidePhont='';
		      	this.reportBtnShow= true;
		      	this.visitProtectDate='';
		      	this.isSubmit=0;
		      	this.pickerValue= new Date();
                this.accountPopupVisible=false;
				this.companyPopupVisible=false;
                this.accountName='';
				this.companyName='';
				this.popupCompany=false;
				this.addressSlots=[];
				this.tempCompanyId=0;
				this.tempCompanyName='';
			}
		}
	}

</script>
<style scoped>
	.mint-field .mint-cell-title{color: #000;}
	.mint-cell-value .sexBtn{width: 56px;height: 24px;border-radius: 4px;border:1px solid #cdcdcd;text-align: center;line-height: 22px;font-size: 12px;margin: 0 4px;}
	.mint-cell-value .sexBtn.active{border:1px solid #eb6100;color: #eb6100;background-color: #ffece0;}
	.sexBtn input{display: none;}
	.telEye{color: #ec6f26;position: absolute;right: 10px;display: inline-block;}
	.toggleTel .fa{margin-right: 6px;}
	.digital-input-box{position: absolute; opacity: 0.01;display: block; z-index: 50; left: 105px;width: 100%; top: 2px; height: 46px;}
	.digital-input{overflow: hidden;width: 100%;}
	.digital-input .digital-input-item{height: 48px;float: left;width: 9.09%;border-right: 1px dashed #d8d8d8;text-align: center;line-height: 48px;display: flex; justify-content: center;align-items: center;}
	.digital-input .digital-input-item:first-child{border-left:1px solid #d8d8d8;}
	.digital-input-item .fa{font-size: 12px;color: #999;}
	.mint-field.is-textarea .mint-cell-wrapper .mint-cell-text{position: absolute;top: 12px;}
	.report-button{padding: 0 10px;}
	.report-button .mint-button--danger{background-color: #eb6100;margin-top: 20px;}
	.digital-input:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}

	.operation-btn{padding: 6px 10px;background-color: #fffef6;border-top: 1px solid #cdcdcd; position: fixed;bottom:0;display: block;width: 100% }
	.operation-btn .operation-btn-link{width: 50%;float: left;text-align: center;height: 24px;line-height: 24px;border-right: 1px solid #cdcdcd;color: #eb6100;font-size: 14px;}
	.operation-btn .operation-btn-link:last-child{border-right: none;}
	.operation-btn:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}
	.mint-popup-2 {width: 100%;height: 50px;text-align: center;background-color: rgba(0,0,0,.7);backface-visibility: hidden;}
    .mint-popup-2 p {line-height: 50px;color: #fff;}
    .company-li{line-height:30px;}
	.arrow-top{width: 20px;height: 20px;border-color:#26a2ff;border-width: 0 0 2px 2px;border-style: solid;transform:rotateZ(-45deg);margin:0 0 0 10px}
	.arrow-down{width: 20px;height: 20px;border-color:#26a2ff;border-width: 2px 2px 0 0;border-style: solid;transform:rotateZ(-45deg);margin:12px 0 0 25px}
	.left{float:left}

	/*弹出层*/
	.popup-page,.popup-mask{position: fixed;z-index: 99;left: 0;right: 0;top: 0;bottom: 0;}
	.popup-mask{background-color: #000;opacity: 0.3;}
	.popup-container{width: 300px;position: relative;background-color: #fff;top: 160px;left: 44%;margin-left: -130px;z-index: 100;border-radius: 6px;}
	.popup-header{padding: 12px 20px;border-bottom: 1px solid #cdcdcd;}
	.popup-body{padding: 16px 20px 10px;}
	.popup-footer{width: 100%;border-top: 1px solid #cdcdcd;}
	.popup-footer .btn{width: 50%;text-align: center;float: left;padding: 12px 0;font-size: 16px;color: #999;}
	.popup-footer .checkBtn{color: #eb6100;}
	.popup-footer .btn:first-child{border-right: 1px solid #cdcdcd;}
	.popup-footer:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0}

	.add-agent {
		width: 50px;
		height: 30px;
		line-height: 20px;
		text-align: center;
		background: #ec6f26;
		color: #fff;
		border-radius: 3px;
	}

	.add-agent-input {
		width: 67%; 
		height: 28px; 
		border-radius: 3px;
		border: 1px solid gray;
	}
	.add-agent-input:focus {
		border: 1px solid #F87242;
	}
</style>

